Todo.View.Item = Backbone.View.extend({
    tagName  : "li",
    className: "item",

    /**
     * Cache the template function for a single item.
     */
    template: _.template($('#item-template').html()),

    /**
     * The DOM events specific to an item.
     */
    events: {
        "dblclick > p .name"    : "startEdit",
        "click .delete"         : "delete",
        "click .toggleCheck"    : "toggleCompleted",
        "blur .edit textarea"   : "endEdit",
        "cancelEdit"            : "render",
        "rename"                : "rename",
        "keydown .edit textarea": "keydownTextarea",
        "keyup .edit textarea"  : "resizeTextarea"
    },

    /**
     * Fire on init
     */
    initialize: function () {
        if (Todo.debug) {
            console.log('Todo.View.Item::initialize');
        }

        this.$el.data(this.model.toJSON());

        this.model.on('change', this.render, this);
    },

    /**
     * Re-render item
     */
    render: function () {
        if (Todo.debug) {
            console.log('Todo.View.Item::render');
        }

        this.$el.html(this.template(this.model.toJSON()));

        if (this.model.get('completed')) {
            this.$('.check').show();
        } else {
            this.$('.check').hide();
        }

        return this;
    },

    toggleCompleted: function () {
        if (Todo.debug) {
            console.log('Todo.View.Item::toggleCompleted');
        }

        this.model.trigger('toggle');
    },

    /**
     * Start editing item
     */
    startEdit: function () {
        this.$el.addClass('editing');
        this.$('.edit textarea').val('').focus().val(this.model.get('name'));
    },

    /**
     * End editing item
     */
    endEdit: function () {
        if (!this.$el.hasClass('editing')) {
            return;
        }

        this.$el.trigger('rename', this.$('.edit textarea').val());
        this.$el.removeClass('editing');
    },

    /**
     * Rename item
     * @param e
     * @param name
     */
    rename: function (e, name) {
        name = $.trim(name);

        if (name != this.model.get('name')) {
            var nameExists = this.model.collection.filter(function (item) {
                return item.get('name') == name;
            }).length;

            if (!nameExists) {
                this.model.save({name: name});
            }
        }
    },

    /**
     * Textarea keydown listener
     * @param e
     */
    keydownTextarea: function (e) {
        var $target = $(e.target);

        if (e.keyCode == 13) {
            $target.blur();
        }

        if (e.keyCode == 27) {
            this.$el.trigger('cancelEdit');
        }

        this.resizeTextarea();
    },

    /**
     * Textarea resizer
     */
    resizeTextarea: function () {
        var $t = this.$('.edit textarea');

        $('#clone').html($t.val());

        $t.css({
            width : $('#clone').width() + 30,
            height: $('#clone').height()
        });
    },

    delete: function () {
        console.log('delete');
    },

    // Remove the item, destroy the model.
    clear : function () {
        if (Todo.debug) {
            console.log('Todo.View.Item::clear');
        }

        this.model.destroy();
    }

});